<template>
    <div class="app">
         <navbar class="navbarb">
            <!--左边内容-->
            <navbar-item type="left">
                <text class="navtext">我的课程</text>
            </navbar-item>
           
            <!-- <navbar-item type="title">
                <text class="headtext">我的课程</text>
            </navbar-item> -->

            <!--右边内容-->
            <navbar-item type="right">
                <button class="navbutton" :eeui="{text:'创建',backgroundColor:'#2fdc7e'}"  @click="popurshowaction"></button>
            </navbar-item>
           

           

        </navbar>

        
        
            
            
         <scroller>
         
         <!-- <refresh class="refresh" @refresh="onrefresh" @pullingdown="onpullingdown" :display="refreshing ? 'show' : 'hide'">
            <text class="indicator-text">刷新页面 ...</text>
            <loading-indicator class="indicator"></loading-indicator>
        </refresh> -->
        <div class="ListBox" v-for="(item,index) in lists" :key="index">
                <div class="listItem">
                    <div class="listTitle" ref="headTit">
                        <div class="listinerTit" @click="titAnimate(index)">
                            <icon class="innerIocn" :class="[deindex == index ? 'innerIocncur' : '']" :eeui="{content:'md-today',fontSize:38}"></icon>
                            <text class="hTit" :class="[deindex == index ? 'hTitcur' : '']">{{item.title}}</text>
                            <icon class="zedieIcon" :class="[deindex == index ? 'zedieIconcur' : '']" :eeui="{content:'ios-arrow-forward',fontSize:38}"></icon>
                        </div>
                        
                    </div>
                    <div class="contbox" v-if="deindex == index">
                        <div class="innerimgbox">
                            <image class="innerimg" src="https://oss.asyke.com/user/1/course/590/image/20190924/1476958466779396.jpg?x-oss-process=image/resize,m_fixed,h_160,w_322" style="width:650px;height:360px"></image>
                            <div class="greyBg">
                            
                                <text class="gtext">{{item.persons}}</text>
                                <text class="gtext">{{item.username}}</text>
                            </div>
                            <text class="zixun">资讯</text>
                            <text class="seticon" @click="dropwrapshow">&#xe683;</text>
                            <text class="seticon2">&#xe68d;</text>
                            <div class="dropwrap" v-if="dropwrap">
                                <text class="dropitem">课程班级</text>
                                <text class="dropitem">归档课程</text>
                                <text class="dropitem">运动设置</text>
                            </div>

                        </div>
                        <div class="cont">
                            <div class="contimgbox">
                                <image class="contImg" src="https://www.asyke.com/static/img/personicoo.png" style="width:60px;height:60px"></image>
                            </div>
                            <div class="banji">
                                    <text class="Bjtext">{{item.class}}</text>
                                <text class="Bjtext1">{{item.num}}人</text>
                            </div>
                            <div class="contCenter">
                                <text class="contCenterText">{{item.classNum}}</text>
                            </div>
                            <icon class="enterIconmore" :eeui="{content:'ios-more',fontSize:38}"></icon>
                            <icon class="enterIcon" @click="enterInnerpage(item.title)" :eeui="{content:'ios-arrow-dropright-circle',fontSize:38}"></icon>
                            
                        </div>
                        <div class="cont">
                            <div class="contimgbox">
                                <image class="contImg" src="https://www.asyke.com/static/img/personicoo.png" style="width:60px;height:60px"></image>
                            </div>
                            <div class="banji">
                                    <text class="Bjtext">{{item.class}}</text>
                                <text class="Bjtext1">{{item.num}}人</text>
                            </div>
                            <div class="contCenter">
                                <text class="contCenterText">{{item.classNum}}</text>
                            </div>
                            <icon class="enterIconmore" :eeui="{content:'ios-more',fontSize:38}"></icon>
                            <icon class="enterIcon" @click="enterInnerpage(item.title)" :eeui="{content:'ios-arrow-dropright-circle',fontSize:38}"></icon>
                            
                        </div>
                    </div>
                    
                    
                    

                </div>
           
           </div>
           <loading class="loading" @loading="onloading" :display="loadinging ? 'show' : 'hide'">
                <text class="indicator-text">加载页面 ...</text>
                <loading-indicator class="indicator"></loading-indicator>
            </loading>
           </scroller>


           <!-- 创建下拉 -->
        <div class="popur" ref="popur">
            <div class="popuritembox" @click="openClass">
                <text class="popuricon">&#xe61f;</text>
                <text class="popuritem">我要开课</text>
            </div>
            <div class="popuritembox"  @click="addClass">
                <text class="popuricon">&#xe60d;</text>
                <text class="popuritem">加入班级</text>
            </div>
            <div class="popuritembox" @click="allClass">
                <text class="popuricon">&#xe600;</text>
                <text class="popuritem">归档处理</text>
            </div>
        </div>

        <!-- mask -->
        <wxc-mask height="800"
                width="660"
                border-radius="6"
                duration="200"
                mask-bg-color="#FFFFFF"
                :has-animation="hasAnimation"
                :has-overlay="true"
                :show-close="true"
                :show="maskshow"
                @wxcMaskSetHidden="wxcMaskSetHidden">
        <div class="content" @click="stopdev">
            <text class="masktitle">添加课程</text>
            <div class="maskcont">
                <div class="maskimgbox">
                    <div class="maskImage">
                        <image class="maskimg" src="https://www.asyke.com/static/img/7.jpg" style="width:190;height:114px;"></image>
                        <text class="maskchengtext">修改</text>
                    </div>
                    <input class="maskinput" type="text" placeholder="输入课程名称">
                </div>
                <div class="maskclassLinebox">
                    <div class="maskclassLine">
                        <text class="defaultclass">班级1</text>
                        <div class="twoediticon">
                            <text class="editicon">&#xe6b0;</text>
                            <text class="delelticon">&#xe62c;</text>
                        </div>
                        
                    </div>
                    
                </div>

                <div class="commitBtn">
                    <button class="maskbutton" :eeui="{text:'新增班级',borderRadius:'0',backgroundColor:'#eaeaea',color:'#222222'}"></button>
                    <button class="maskbutton" :eeui="{text:'确定',borderRadius:'0',backgroundColor:'#2fdc7e',color:'#ffffff'}"></button>
                </div>

            </div>
            
        </div>
        </wxc-mask>

    </div>      
</template>

<style scoped>
    .app {
        background-color: #ebebeb;
        padding-bottom: 100;
    }
    .navbarb{
        width: 750px;
        height: 100px;
        background-color: #1eb76e;
    }

    .headtext {
        font-size: 30px;
        color: #ffffff;
    }
    .icon {
        width: 100px;
        height: 100px;
    }
    .ListBox{
       background-color: #ffffff;
       margin-bottom: 20;
    }
    .listinerTit{
        width: 750;
        height: 97;
        flex-direction: row;
        border-bottom-color: #ebebeb;
        border-bottom-style: solid;
        border-bottom-width: 1px;
        align-items: center;
    }
    .innerIocn{
        width: 40;
        height: 40;
        margin-left: 43px;
        color: #333;
        margin-right: 10px;
    }
    .innerIocncur{
        color: #2dd178;
    }
    .hTit{
        width: 500;
        font-size: 32px;
         color: #333;
    }
    .hTitcur{
        color: #2dd178;
    }
    .greyBg{
        width: 650px;
        height: 70px;
        flex-direction: row-reverse;
        margin-right: 43;
        position: absolute;
        bottom: 0;
        left: 0;
        background-color: rgba(5, 5, 5, 0.5);
        align-items: center;
        
    }

    .zixun{
        position: absolute;
        top: 10;
        left: 40;
        width: 70px;
        height: 70px;
        line-height: 70;
        text-align: center;
        background-color: rgba(5, 5, 5, 0.5);
        color: #ffffff;
        border-radius: 100;

    }
    .gtext{
        color: #ffffff;
        margin-right: 40px;
    }
    .contimgbox{
        width: 80px;
        height: 80px;
        border-radius: 10;
    }
    .contimgbox{
        background-color: #fedb68;
        justify-content: center;

    }
    .contImg{
        align-self: center;   
    }
    .cont{
        width: 650;
        flex-direction: row;
        padding-bottom: 30px;
        margin-top: 20;
        border-bottom-style: dashed;
        border-bottom-width: 1px;
        border-bottom-color: #d8d8d8;
        align-self: center;
    }
    .innerimgbox{
        width: 650px;
        height: 300px;
        border-radius: 10;
        overflow: hidden;
        align-self: center;
        margin-top: 30;
        position: relative;
    }
    .contCenter{
        
        margin-top: 30;
        
    }
    .contCenterText{
        width: 200;
        font-size: 28;
        color: #f7b027;
    }
    .Bjtext{
        margin-top: 10px;
        font-size: 26;
    }
    .Bjtext1{
        font-size: 24;
        color: #999999;
        margin-top: 10px;
    }
    .banji{
        width: 200;
        margin-left: 10px;
    }
    .list{
        padding-bottom: 200;
    }
     .refresh {
        width: 750;
        -ms-flex-align: center;
        -webkit-align-items: center;
        -webkit-box-align: center;
        align-items: center;
    }
    .indicator-text {
        color: #888888;
        font-size: 28px;
        text-align: center;
    }
    .indicator {
        margin-top: 16px;
        height: 40px;
        width: 40px;
        color: blue;
    }
    .loading {
    width: 750;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;
    align-items: center;
  }
  .indicator {
    color: #2dd178;
}
.zedieIcon{
    width: 150;
    height: 80;
    color: #d8d8d8;
    transform: rotate(0deg);
    transition: all 0.4s ease;
    
}
.zedieIconcur{
    transform: rotate(90deg);
    transition: all 0.4s ease;
}
.enterIcon{
    width: 80px;
    height: 100px;
    color: #2dd178;
    
}
.enterIconmore{
    width: 80px;
    height: 100px;
    color: #999;
}
.navbutton{
    width:110;
    height:65;
    margin-right:25;
}
.navtext{
    font-size:36;
    color:#fff;
    margin-left:45;
}
.seticon{
    position: absolute;
    top: 20;
    right: 80;
    color: #ebebeb;
    font-family: iconfont;
    font-size: 30;
}
.seticon2{
    position: absolute;
    top: 20;
    right: 20;
    color: #ebebeb;
    font-family: iconfont;
    font-size: 30;
}
.dropwrap{
    width: 140;
    background-color: #fff;
    position: absolute;
    top: 56;
    right: 33;
    padding-top: 10;
    padding-bottom: 10;
}
.dropitem{
    text-align: center;
    margin-top: 10;
    margin-bottom: 10;
    font-size: 24;
}
.masktitle{
    font-size: 27;
    text-align: center;
    height: 80;
    line-height: 80;
    border-bottom-color: #dddddd;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    color: #2222;
}
.popur{
    position: absolute;
    top: 100px;
    right: 30px;
    width: 180;
    text-align: center;
    background-color: #fff;
    border-right-color: #999;
    border-right-style: solid;
    border-right-width: 1px;
    border-bottom-color: #999;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-left-color: #999;
    border-left-style: solid;
    border-left-width: 1px;
    height: 0;

}
.popuritembox{
    flex-direction: row;
    justify-content: space-between;
    padding-bottom: 15;
    padding-left: 20;
    padding-right: 20;
    padding-top: 22;
}
.popuritem{
    font-size: 24px;
}
.popuricon{
    font-family: iconfont;
    font-size: 30;
    color: #1eb76e;
}
.maskimgbox{
    flex-direction: row;
}
.maskImage{
    width: 190;
    height: 114;
    border-radius: 6;
    position: relative;
}
.maskimgbox{
    margin-top: 20;
    margin-left: 30;
}
.maskchengtext{
    width: 190;
    height: 47;
    line-height: 47;
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: rgba(0,0,0,0.5);
    color: #fff;
    font-size: 24;
    text-align: center;
}
.maskinput{
    width: 289;
    height: 60;
    border-width: 1px;
    border-style: solid;
    border-color: #ddd;
    border-radius: 6;
    margin-left: 30;
    padding-left: 10;
}
.maskcont{
    height: 720;
}
.maskclassLinebox{
    margin-top: 50;
    height: 440;
}
.maskclassLine{
    flex-direction: row;
    justify-content: space-between;
    height: 80;
    border-bottom-style: dashed;
    border-bottom-width: 1px;
    border-bottom-color: #999;
    align-items: center;
    margin-left: 30;
    margin-right: 30;
}
.defaultclass{
    font-size: 30;
    color: #333;
}
.twoediticon{
    flex-direction: row;
}
.editicon{
    font-family: iconfont;
    font-size: 38;
    color: #999;
    margin-right: 40;
}
.delelticon{
    font-family: iconfont;
    font-size: 38;
    color: #999;
}
.commitBtn{
    flex-direction: row;
    margin-top: 20;
}
.maskbutton{
    width: 330;
    height: 80;
}
</style>

<script>
    
    const animation = weex.requireModule('animation');
    const eeui = app.requireModule('eeui');
    import { WxcMinibar,WxcDialog,WxcMask  } from 'weex-ui';
    export default {
        components: { WxcMinibar,WxcDialog,WxcMask   },
        data() {
            return {
                popurHeight:0,
                maskshow: false,
                isFalse: false,
                hasAnimation: true,
                dropwrap:false,
                refreshing: false,
                loadinging: false,
                deindex:0,
 
               lists:[
                    {
                        title:'大学生体质与健康',
                        num:10,
                        class:'2019班',
                        classNum:'SJDZZIY',
                        username:'小微',
                        persons:600,
                        show:false,
                    },
                    {
                       title:'撒打算打算打算',
                       num:13,
                       class:'2018班',
                       classNum:'FFDDSXD',
                       username:'大卫',
                       persons:430,
                       show:false
                    },
                    {
                       title:'ssdsa',
                       num:13,
                       class:'经济学一班',
                       classNum:'FFDDSXD',
                       username:'大卫',
                       persons:430,
                       show:false
                    },
                    {
                       title:'ssdsa',
                       num:13,
                       class:'2018班',
                       classNum:'FFDDSXD',
                       username:'大卫',
                       persons:430,
                       show:false
                    }

                   ],
            }
        },
        methods: {
            
            // onrefresh (event) {
              
            //     this.refreshing = true
            //     setTimeout(() => {
            //     this.refreshing = false
            //     }, 2000)
            // },
            // onpullingdown (event) {
            //     console.log("dy: " + event.dy)
            //     console.log("pullingDistance: " + event.pullingDistance)
            //     console.log("viewHeight: " + event.viewHeight)
            //     console.log("type: " + event.type)
            // },
            onloading (event) {
                //modal.toast({ message: 'Loading', duration: 1 })
                this.loadinging = true
                setTimeout(() => {
                this.loadinging = false
                }, 2000)
            },
            titAnimate(index){
                if(this.deindex == index){
                    this.deindex = -1;
                }else{
                    this.deindex = index;
                }  
            },
            enterInnerpage(tit){
                eeui.openPage({
                    url: 'layoutPage.js',
                    statusBarColor:'#1eb76e',
                    animated:false,
                    params:{title:tit}
                }, function(result) {
                    //......
                }); 
            },
            dropwrapshow(){
                this.dropwrap = !this.dropwrap;
            },
            popurshowaction(){
                var popurEl = this.$refs.popur;

               if( this.popurHeight == 0 ){
                   this.popurHeight = '205';
                    animation.transition(popurEl, {
                        styles: {
                            height:this.popurHeight
                        },
                        duration: 100, //ms
                        timingFunction: 'ease',
                        needLayout:false,
                        delay: 0 //ms
                        }, function () {
                            //eeui.toast({ message: 'animation finished.' })
                    })
               }else{
                   this.popurHeight = '0';
                    animation.transition(popurEl, {
                        styles: {
                            height:this.popurHeight
                        },
                        duration: 100, //ms
                        timingFunction: 'ease',
                        needLayout:false,
                        delay: 0 //ms
                        }, function () {
                            //eeui.toast({ message: 'animation finished.' })
                    })
               }
                
               
            },
           openClass(){
               //关闭弹框
                var self = this;
                var popurEl = this.$refs.popur;
                if( this.popurHeight == '205' ){
                   this.popurHeight = '0';
                    animation.transition(popurEl, {
                        styles: {
                            height:this.popurHeight
                        },
                        duration: 100, //ms
                        timingFunction: 'ease',
                        needLayout:false,
                        delay: 0 //ms
                        }, function () {
                            self.openMask();
                            //eeui.toast({ message: 'animation finished.' })
                    });


               }



           },
           addClass(){
               eeui.toast('加入班级')
           },
           allClass(){
                eeui.toast('归档班级')
           },
           
           openMask (e) {//打开加入班级弹框
                this.maskshow = true;
                this.hasAnimation = true;
            },
            wxcMaskSetHidden () {
                this.maskshow = false;
            },
            stopdev(){}
           

 
        },
        created() {
            // 添加 字体图标
            let domModule = weex.requireModule("dom");
            domModule.addRule("fontFace", {
            fontFamily: "iconfont",
            src: "url('http://at.alicdn.com/t/font_1628280_p78f7z67jyq.ttf')"
            });
        }
    };
</script>
